<template>
    <div>
        <!-- <nav>
            <ul class="nUl">
                <li><router-link to="/">首页</router-link></li>
                <li><router-link to="/prolist">产品</router-link></li>
                <li>产品动态</li>
                <li>公司实力</li>
                <li>联系</li>
               
            </ul>
        </nav> -->
        <!-- banner -->
        <div class="swiper-container fn1" >
            <div class="swiper-wrapper ">
            <div class="swiper-slide"><img src="../assets/images/1.png" alt=""></div>
            <div class="swiper-slide"><img src="../assets/images/2.png" alt=""></div>
            <div class="swiper-slide"><img src="../assets/images/3.png" alt=""></div>
            <div class="swiper-slide"><img src="../assets/images/4.png" alt=""></div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
        <!-- main -->
        <section class="proSec">
            <div class="title">
                <h2>产品(源码出售)</h2>
                <a href="">更多>></a>
            </div>
            <div class="produce clearfix">
                <ul id="ul" class="ss">
                  
                  
                  <li v-for="(el,index) of obj" :key="index">
                    <a href=""><img :src="el.img" alt=""></a>
                        <h4>{{el.title}}</h4>
                        <p>{{el.content}}</p>
                  </li>
                    <!-- <li>
                        <a href=""><img src="../assets/images/list1.png" alt=""></a>
                        <h4>多商户电商分销系统</h4>
                        <p>多渠道生态化，新零售电商系统</p>
                    </li>
                    <li>
                        <a href=""><img src="../assets/images/list2.png" alt=""></a>
                        <h4>生活通O2O系统</h4>
                        <p>创新、丰富的商业模式型O2O系统</p>
                    </li>
                    <li>
                        <a href=""><img src="../assets/images/list3.png" alt=""></a>
                        <h4>社区O2O系统</h4>
                        <p>让物业服务变得简单高效的O2O社区服务平台</p>
                    </li>
                    <li>
                        <a href=""><img src="../assets/images/list4.png" alt=""></a>
                        <h4>智慧店铺</h4>
                        <p>超越微信营销，生意差，回头客少，就用小猪智慧店铺</p>
                    </li>
                    <li>
                        <a href=""><img src="../assets/images/list5.png" alt=""></a>
                        <h4>人人销智能名片</h4>
                        <p>专注于企业营销和销售获客</p>
                    </li>
                    <li>
                        <a href=""><img src="../assets/images/list6.png" alt=""></a>
                        <h4>公众号微信营销系统</h4>
                        <p>全球5000家用户共同选择的微信营销系统</p>
                    </li>
                    <li>
                        <a href=""><img src="../assets/images/list7.png" alt=""></a>
                        <h4>外卖O2O系统</h4>
                        <p>功能完善、支持多行业的外卖配送系统</p>
                    </li>
                    <li>
                        <a href=""><img src="../assets/images/list8.png" alt=""></a>
                        <h4>跑腿小程序系统</h4>
                        <p>帮买帮送的本地同城跑腿配送系统</p>
                    </li>
                    <li>
                        <a href=""><img src="../assets/images/list9.png" alt=""></a>
                        <h4>同城惠选小程序</h4>
                        <p>本地生活优惠平台</p>
                    </li>
                    <li>
                        <a href=""><img src="../assets/images/list10.png" alt=""></a>
                        <h4>社群小程序系统</h4>
                        <p>可让用户流量暴涨的吸粉神器</p>
                    </li> -->
                </ul>
            </div>
        </section >
        <section class="newsSec">
            <div class="title">
                <h2>开发动态</h2>
                <a href="">更多>></a>
            </div>
            <div class="news">
               <ul>
                   <li><a href="">微餐饮订单导出项新增对应厨房类目</a><span>[2018-12-28]</span></li>
                   <li><a href="">微餐饮、自定义菜单等功能优化</a><span>[2018-10-28]</span></li>
                   <li><a href="">拆福袋上线，超强互动助力“双十一”</a><span>[2018-10-23]</span></li>
                   <li><a href="">小程序新增魔方功能，宣传样式由你掌握</a><span>[2019-01-03]</span></li>
                   <li><a href="">买买买！剁手党必备的小程序购物单来啦！</a><span>[2018-12-13]</span></li>
                   <li><a href="">开屏有礼上线，助力卡券高效推广！</a><span>[2018-12-04]</span></li>
                   <li><a href="">小猪O2O全面适配商家自有有线打印机</a><span>[2019-01-07]</span></li>
                   <li><a href="">社区拼团新增五大功能，个个都实用！</a><span>[2019-01-03]</span></li>
                   <li><a href="">2018重要功能大盘点，快看看你错过了什么？</a><span>[2018-12-29]</span></li>
               </ul>
            </div>
        </section>

        <section class="case">
           <div class="title"><h2>案例</h2></div>
           
             <div class="swiper-container">
            <div class="swiper-wrapper">
            <div class="swiper-slide">
              <ul >
                <li>
                  <img src="../assets/images/logo_03.png" alt="">
                  <p>郑州日报</p>
                </li>
                <li>
                  <img src="../assets/images/pingtai_03.png" alt="">
                  <p>齐鲁晚报</p>
                </li>
                <li>
                  <img src="../assets/images/pingtai_28.png" alt="">
                  <p>温州日报</p>
                </li>
                <li>
                  <img src="../assets/images/logo_0556.png" alt="">
                  <p>温州都市报</p>
                </li>
                <li>
                  <img src="../assets/images/logo_36.png" alt="">
                  <p>大连报业集团</p>
                </li>
                <li>
                  <img src="../assets/images/logo_37.png" alt="">
                  <p>泸州市电视台</p>
                </li>
                <li>
                  <img src="../assets/images/logo_07.png" alt="">
                  <p>温州日报</p>
                </li>
                <li>
                  <img src="../assets/images/logo_12.png" alt="">
                  <p>鄂东晚报</p>
                </li>
                <li>
                  <img src="../assets/images/logo_19.png" alt="">
                  <p>湖北日报传媒集团</p>
                </li>
              </ul>
            </div>
            <div class="swiper-slide">
              <ul>
                <li>
                  <img src="../assets/images/logo_13.png" alt="">
                  <p>绿地集团</p>
                </li>
                <li>
                  <img src="../assets/images/logo_14.png" alt="">
                  <p>安徽宣酒集团</p>
                </li>
                <li>
                  <img src="../assets/images/logo_32.png" alt="">
                  <p>浙江省通信产业...</p>
                </li>
                <li>
                  <img src="../assets/images/logo_38.png" alt="">
                  <p>天士力控股集团...</p>
                </li>
                <li>
                  <img src="../assets/images/logo_42.png" alt="">
                  <p>中国国际展览中...</p>
                </li>
                <li>
                  <img src="../assets/images/logo_43.png" alt="">
                  <p>中国电信集团公...</p>
                </li>
                <li>
                  <img src="../assets/images/pingtai_05.png" alt="">
                  <p>新希望乳业</p>
                </li>
                <li>
                  <img src="../assets/images/pingtai_07.png" alt="">
                  <p>浙江报喜鸟集团</p>
                </li>
                <li>
                  <img src="../assets/images/logo_20.png" alt="">
                  <p>河北联通集团</p>
                </li>
              </ul>
            </div>
            <div class="swiper-slide">
              <ul>
                <li>
                  <img src="../assets/images/pingtai_13.png" alt="">
                  <p>澳品（北京）文...</p>
                </li>
                <li>
                  <img src="../assets/images/pingtai_37.png" alt="">
                  <p>温州方瑞文化创...</p>
                </li>
                <li>
                  <img src="../assets/images/pingtai_40.png" alt="">
                  <p>上海通路快建网...</p>
                </li>
                <li>
                  <img src="../assets/images/leshan_01.png" alt="">
                  <p>乐山新闻网</p>
                </li>
                <li>
                  <img src="../assets/images/beida_01.png" alt="">
                  <p>北京大学出版社</p>
                </li>
                
              </ul>
            </div>
            </div> 
            <!-- Add Pagination -->
           <div class="swiper-pagination"></div>
            </div>
        </section>
        
        <!-- <div style="height:15rem"></div> -->
    </div>
</template>
<script>
import {mapActions,mapState,mapGetters} from "vuex"
export default {
  data(){
    return {
      obj:null
    }
  },
  mounted() {
    var swiper = new Swiper(".swiper-container", {
      slidesPerView: 1,
      loop: true,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      pagination: {
        el: ".swiper-pagination",
        clickable: true
      }
     
    });  
       fetch("http://127.0.0.1/mobile/app/server/produce.php").then(res=>
               res.json() 
             ).then(data=>{
               this.obj=data
               console.log(data)
              //  data.forEach(ele => {
              //    console.log(ele)
              //     this.obj=ele
              //  console.log(this.obj)
              // var str=`<li>
              //           <a href=""><img src="${ele.img}"></a>
              //           <h4>${ele.title}</h4>
              //           <p>${ele.content}</p>
              //       </li>`
              //     ul.innerHTML+=str
              //  });
              
       })
  },
    
};
</script>
<style >
.clearfix::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.fn1 {
  height: 3.5rem;
  width: 100%;
}
.swiper-slide img {
  width: 100%;
}
.title {
  padding: 0.2rem;
  background: #efefef;
  height: 0.5rem;
  line-height: 0.5rem;
}
h2 {
  font-size: 0.32rem;
  color: #555;
  font-weight: normal;
  float: left;
}
.title a {
  float: right;
  color: #555;
  font-size: 0.3rem;
}
.produce {
  padding: 0 0.2rem;
  height: auto;
  padding-bottom: 0.4rem
}
.produce ul{margin-left: 0.2rem}
.produce ul li {
  float: left;
  width: 47%;
  height: 2rem;
  text-align: center;
  margin-top: 0.3rem;
  margin-right: 0.2rem;
  padding: 1rem 0;
  background: #fff;
  animation: moveleft 1s 0s ease both; 
}
.produce ul li img {
  height: 0.8rem;
}
.produce ul li h4 {
  font-size: 0.3rem;
  font-weight: normal;
  line-height: 0.8rem;
}
.produce ul li p {
  font-size: 0.2rem;
  color: #ccc;
  padding: 0 0.2rem;
}
.news {
  padding: 0.4rem 0.2rem;
  
}
.news ul li {
  line-height: 0.8rem;
  height: 0.8rem;
  border-bottom: 1px solid #eee;
  color: #9d9d9d;
  font-size: 0.27rem;
  background: url(../assets/images/dot.png) no-repeat left;
  padding-left: 0.2rem;
  
}
.news ul li a {
  color: #9d9d9d;
  margin-right: 0.3rem;
  width:4.5rem;
  float: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}
.news ul li span {
  float: right;
}
.case .swiper-slide ul{display: block;overflow: hidden;padding: 0.4rem 0;padding-left: 0.3rem;margin-bottom: 0.2rem}
.case ul li{float:left;width:29%;height:1.5rem;margin-bottom: 0.3rem;text-align: center;margin-right:0.3rem }
.case ul li p{font-size:0.25rem;color:#555}
</style>


